<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2025-10-18 11:01:44
 * @LastEditors: 小白
 * @LastEditTime: 2025-10-22 11:25:44
 * @FilePath: \tmsadmin\src\views\contract\template\components\details.vue
-->
<template>
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
          合同模板
        </div>
      </div>
    </template>
    <el-form ref="ruleFormRef" v-loading="loading" :model="ruleForm" :rules="rules" label-width="100px"
      class="demo-ruleForm" status-icon>
      <el-form-item label="合同模板" prop="contractTemplate">
        <Editors ref="editorRef" :height="'500px'" :value="ruleForm.contractTemplate" @updateValue="getValue"></Editors>
      </el-form-item>
      <el-form-item label="上传公章" prop="officialSeal">
        <el-upload class="avatar-uploaders" :action="HTTP_URI.UPLOADFILE" :show-file-list="false" :headers="headers"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.officialSeal" :src="ruleForm.officialSeal" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
        <el-input placeholder="请输入" v-model="ruleForm.officialSeal" v-show="false" />
      </el-form-item>
      <el-form-item label="邮寄地址" prop="mailingAddress">
        <el-input placeholder="请输入" v-model="ruleForm.mailingAddress" />
      </el-form-item>
      <el-form-item label="邮政编码" prop="postalCode">
        <el-input placeholder="请输入" v-model="ruleForm.postalCode" />
      </el-form-item>
      <el-form-item label="业务电话" prop="businessPhone">
        <el-input placeholder="请输入" v-model="ruleForm.businessPhone" />
      </el-form-item>
      <el-form-item label="财务电话" prop="earningsCall">
        <el-input placeholder="请输入" v-model="ruleForm.earningsCall" />
      </el-form-item>
      <el-form-item label="" prop="">
        <el-button type="primary" @click="submit(ruleFormRef)">
          确 认
        </el-button>
        <el-button type="primary" @click="yulan()">
          预览
        </el-button>
        <el-button @click="handleCloses()">
          取 消
        </el-button>
      </el-form-item>
    </el-form>
    <Model ref="modelRef"></Model>
  </el-card>
</template>
<script setup lang="ts">
import { getToken } from '@/plugins/cookie'
import { onMounted, ref } from 'vue'
import HTTP_URI from '@/api/base_url'
import Editors from '@/components/editorht.vue'
import { ElMessage, FormInstance } from 'element-plus'
import { saveAs } from "file-saver";
import { REQUEST } from '@/api/request'
import Model from '../modal.vue'
import { store } from '@/store'
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  contractTemplate: '',
  officialSeal: '',
  mailingAddress: '',
  postalCode: '',
  businessPhone: '',
  earningsCall: ''
})
const loading = ref(false)
const modelRef = ref()
const editorRef = ref()
const images = ref()
const rules = ref({
  contractTemplate: [
    { required: true, message: '请输入合同模板', trigger: 'blur' }
  ],
  officialSeal: [
    { required: false, message: '请上传公章', trigger: 'blur' }
  ],
  mailingAddress: [
    { required: false, message: '请输入邮寄地址', trigger: 'blur' }
  ],
  postalCode: [
    { required: false, message: '请输入邮政编码', trigger: 'blur' }
  ],
  businessPhone: [
    { required: false, message: '请输入业务电话', trigger: 'blur' }
  ],
  earningsCall: [
    { required: false, message: '请输入财务电话', trigger: 'blur' }
  ]
})
onMounted(() => {
  getData()
})
const headers = ref({
  'Token': getToken()
})
const getValue = (val: any) => {
  ruleForm.value.contractTemplate = val
}
const mhtml = {
  top: "<!DOCTYPE html>\n<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
    "      xmlns:w=\"urn:schemas-microsoft-com:office:word\"\n" +
    "      xmlns:dt=\"uuid:C2F41010-65B3-11d1-A29F-00AA00C14882\"\n" +
    "      xmlns=\"http://www.w3.org/TR/REC-html40\">\n_html_</html>",
  head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
  body: "<body>_body_</body>"
}

const exportReport = (styles: any, html: any, reportName: any) => {
  let fileContent = mhtml.top.replace("_html_",
    mhtml.head.replace("_styles_", styles) +
    mhtml.body.replace("_body_", html));
  let blob = new Blob([fileContent], {
    // 单位：pt
    type: "application/msword;charset=utf-8"
  });
  saveAs(blob, reportName + ".doc");
}
// 调用
// exportReport('', ruleForm.value.contractTemplate, '导出的文件名xxx.doc')

const yulan = () => {
  exportReport({
    paperSize: 'A4',
    orientation: 'portrait',
    margins: { top: 100 }
  }, ruleForm.value.contractTemplate, '导出的文件名xxx.doc')
  modelRef.value.openModal({ data: editorRef.value.data.content, url: images.value })
}
const getData = () => {
  REQUEST.POST('OFFICIALINFO', {
    id: store.state.userInfo.houseId
  }).then((res: any) => {
    if (res.status == 200) {
      console.log(res.data.contractTemplate)
      ruleForm.value = res.data
      setTimeout(() => {
        editorRef.value.setValues(res.data.contractTemplate)
      }, 100);
    }
  })
}
const submit = async (formEl: FormInstance | undefined) => {
  ruleForm.value.contractTemplate = editorRef.value.data.content
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true


      REQUEST.POST('HOUSEEDIT', ruleForm.value).then((res: any) => {
        if (res.status === 200) {
          loading.value = false
          ElMessage({
            type: 'success',
            message: '编辑成功！'
          })
          formEl.resetFields()
          setTimeout(() => {

            getData()

          }, 100);
        } else {
          ElMessage({
            type: 'warning',
            message: res.message
          })
        }
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.avatar-uploaders {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #dcdfe6 dashed;
  cursor: pointer;
  border-radius: 5px;
}

.avatar-uploaders:hover {
  border: 1px #409eff dashed;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #cccccc;
}

.avatar-uploaders .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>